﻿<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="script/md5.js"></script>
<script type="text/javascript" src="script/script.js"></script>
<script type="text/javascript" src="script/jscolor.js"></script>
<script>
	window.onload = init;
</script>
</head>
<body>

	<div id="login-form" align="center">


		<label style="color: black; font-size: 30">LOGIN CHAT GROUP</label>
		<table width="300" border="1" cellpadding="5">
			<tr>
				<td width="150"><label style="color: white;"><strong>Username:
					</strong></label></td>
				<td width="150"><input type="text" id="input-username"></td>
			</tr>
			<tr>
				<td width="150"><label style="color: white;"><strong>Password:
					</strong></label></td>
				<td width="150"><input type="password" id="input-password"></td>
		</table>
		<input id="btnLogin" type="button" value="Đăng nhập"> <br>
		<label id="lblError" style="color: red; visibility: hidden">Wrong
			username or password </label>
	</div>






	<div id="content">
		<div id="avatar-panel">
			<p id="room-info-label">List User In Room</p>
			<div id="room-info">			
				<p><strong>Loading...</strong></p>
				
				
			</div>
			<input type="button" id="btnQuit" value="Quit Room">
			<img id="avatar1" src="avatar/op2.jpg">
		</div>
		<div id="chat-panel">
			<div id="chat-area">
				<!-- <p><span class="content"><img src="icon/emoticons-icon.png"></span></p> -->
			</div>
		</div>



		<div id="function-bar">
			<img id="text-menu" src="icon/font-icon.png"> <img
				id="emoticon-menu" src="icon/emoticons-icon.png">
		</div>
		<div id="popup-menu-text" style="visibility: hidden">
			<span>Font: <select id="select-font">
					<option value="Arial">Arial</option>
					<option value="Times New Roman">Times New Roman</option>
					<option value="Courier New">Courier New</option>
					<option value="Lucida Console">Lucida Console</option>
			</select>
			</span> <span>Size: <select id="select-font-size">
					<option value="12px">12</option>
					<option value="14px">14</option>
					<option value="16px">16</option>
					<option value="18px">18</option>
			</select>
			</span> <span>Color: <input id="select-color"
				class="color {pickerOnfocus:false}" value="000000">
			</span>
		</div>



		<div id="popup-menu-emoticon" style="visibility: hidden">
			<img id='emo1' src='icon/emoticons-icon.png'> <img id='emo2'
				src='icon/emoticon-2-icon.png'> <img id='emo3'
				src='icon/emoticon-3-icon.png'>
		</div>
		<div id="message-panel">
			
			<p id="iframe-message-area"></p>
			<input name="btnSend" id="btnSend" type="button" value="Gửi">
		</div>



	</div>

</body>
</html>